/* eslint-disable no-useless-escape */
import React, { PureComponent } from 'react';
import DescriptionList from '@/components/DescriptionList';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Divider,
  Card,
  Row,
  Col,
  DatePicker,
  Modal,
  // Checkbox,
  Select,
  Table,
  InputNumber,
  Empty
} from 'antd';
import moment from 'moment';
import HOCSelect from '@/components/AntDesign/Select';
import TextArea from 'antd/lib/input/TextArea';

// const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker } = DatePicker;
const { Description } = DescriptionList;
@Form.create()
class ChargeInform extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      newAssArr: [],
      mkupPayObj: {},
      disBeginData: '',
    };
    this.tableSearchLayout = {
      labelCol: { md: { span: 11 } },
      wrapperCol: { md: { span: 13 } },
    };
    this.tableSearchLayout1 = {
      labelCol: { md: { span: 6 } },
      wrapperCol: { md: { span: 18 } },
    };
  }

  // 修改
  updateChare = () => {
    const { updateChare } = this.props;
    updateChare();
  };

  addMkupPay = item => {
    const { dispatch } = this.props;
    // 限制补缴结束日期
    this.setState({
      disBeginData: moment(item.beginDate),
    });
    dispatch({
      type: 'career/selectMkuPay',
      payload: { mkupPayId: item.mkupPayId },
    })
      .then(res => {
        // 修改
        // const assArr = [];
        if (res.success) {
          this.setState({
            mkupPayVisible: true,
            mkupPayObj: item,
          });
          if (item.pdId) {
            const pdNameObj = res.data.pdDictList.filter(items => items.itemCode === item.pdId)[0];
            const pdName = pdNameObj ? pdNameObj.itemName : '';

            dispatch({
              type: 'career/pdChange', // 切换产品
              payload: {
                pdName,
              },
            });
          } else {
            dispatch({
              type: 'career/updateModelData', // 切换产品
              payload: {
                assDictList: [],
                joinTypeDictList: [],
              },
            });
          }
        }
      })
      .catch(err => {
        console.log(err);
      });
  };

  // eslint-disable-next-line no-unused-vars
  delMkupPay = item => {
    const { dispatch } = this.props;
    const { mkupPayId, pdId, taskId } = item;
    dispatch({
      type: 'career/delPayInfor',
      payload: { mkupPayId, pdId, taskId },
    });
  };

  // 选择产品
  pdChange = (value, options) => {
    const { dispatch, form } = this.props;
    const {
      props: { children },
    } = options;

    if (children) {
      form.resetFields(['asss', 'joinType']);
      dispatch({
        type: 'career/pdChange', // 切换产品
        payload: {
          pdName: children,
        },
      });
    }
    form.setFieldsValue({
      'submitAsss': []
    })
  };

  dateChange = date => {
    const { form } = this.props;
    if (date) {
      date.endOf('month').format('YYYY-MM-DD');
    }
    form.setFieldsValue({
      endDate: date,
    });
  };

  beginDateChange = date => {
    this.setState({
      disBeginData: date,
    });
  };

  // onMkuChange = (value, id) => {
  //   const { dispatch } = this.props;
  //   if (+value === 1) {
  //     this.setState({
  //       propFlag: false,
  //     });
  //   } else {
  //     this.setState({
  //       propFlag: true,
  //     });
  //   }
  //   dispatch({
  //     type: 'career/disMku',
  //     payload: { value, id },
  //   });
  // };

  // 计算补缴
  onMkupPayPlcy = index => {
    const { onMkupPayPlcy } = this.props;
    onMkupPayPlcy(index);
  };

  // 补缴 确定
  mkupPayOk = () => {
    const {
      dispatch,
      form,
      serId,
      careerMatInfor: { matPkgVo },
    } = this.props;
    const pageDetailId =
      matPkgVo && matPkgVo.pageDetailId ? `mat_${matPkgVo.pageDetailId}` : undefined;
    const valuesArr = [
      'pdId',
      'submitAsss',
      'beginDate',
      'endDate',
      'joinType',
      'serPrice',
      'chrgFlag',
      'remark',
    ].filter(item => item);
    const { mkupPayObj } = this.state;

    form.validateFields(valuesArr, (err, fieldsValue) => {
      if (err) return;
      const tempFieldsValue = { asss: [] };
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'beginDate' || key === 'endDate') {
          tempFieldsValue[key] = fieldsValue[key].valueOf();
        } else if (key === 'submitAsss' && fieldsValue[key].length) {
          tempFieldsValue.asss = [...fieldsValue[key]];
          tempFieldsValue.asss.forEach((a, i) => {
            if (mkupPayObj.asss && mkupPayObj.asss.length) {
              mkupPayObj.asss.forEach(item => {
                if (a === item.itemName) {
                  tempFieldsValue.asss[i] = item.itemCode;
                }
              });
            }
          });
        } else {
          tempFieldsValue[key] = fieldsValue[key];
        }
      });
      tempFieldsValue.joinIdeId =
        form.getFieldsValue() && form.getFieldsValue()[pageDetailId]
          ? form.getFieldsValue()[pageDetailId].inpVal
          : undefined;
      dispatch({
        type: 'career/addPayInfor',
        payload: { ...tempFieldsValue, entryId: serId, mkupPayId: mkupPayObj.mkupPayId },
      }).then(res => {
        if (res.success) {
          this.setState({
            mkupPayVisible: false,
          });
        }
      });
    });
  };

  // 补缴 取消
  mkupPayCancel = () => {
    this.setState({
      mkupPayVisible: false,
    });
  };

  // 选择险种
  onAss = e => {
    const { newAssArr } = this.state;
    newAssArr.push({ ass: e.target.value, checked: e.target.checked });
  };

  // 补缴时间 禁用
  disabledMkupEndDate = (disDate, current) =>
    // const endDate = moment(disDate)
    //   .add('year', 0)
    //   .month(moment(disDate).month() + 1)
    //   .format('YYYY-MM');
    current && current <= moment(disDate);

  render() {
    const {
      form: { getFieldDecorator },
      assDictList,
      pdDictList,
      joinTypeDictList,
      chrgFlagDictList,
      careerMatInfor,
      detail,
      isDetail,
      addPayLoading,
    } = this.props;
    const { chargeDto, mkupPayDets,pdChargeData } = isDetail ? detail : careerMatInfor;
    const {pdChargeDtos} = chargeDto;
    const { mkupPayVisible, mkupPayObj, disBeginData } = this.state;
    mkupPayObj.selectAss = [];
    if (mkupPayObj.asss && mkupPayObj.asss.length) {
      mkupPayObj.asss.forEach((a, i) => {
        if (assDictList.length) {
          assDictList.forEach(item => {
            if (item.itemCode === a.itemCode) {
              mkupPayObj.selectAss[i] = a.itemCode;
            } else {
              mkupPayObj.selectAss[i] = a.itemName;
            }
          });
        }
      });
    }
    const serColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '开始日期',
        dataIndex: 'mkupPayBeginDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '结束日期',
        dataIndex: 'mkupPayEndDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '企业比例',
        dataIndex: 'entpProp',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '个人比例',
        dataIndex: 'perProp',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '缴纳合计',
        dataIndex: 'payAmo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
    ];

    const payColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        width: '20%',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '业务开始日期',
        dataIndex: 'sendBeginDate',
        width: '25%',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '申报状态',
        dataIndex: 'execStateName',
        width: '25%',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '交接时间',
        dataIndex: 'submitExecTime',
        width: '25%',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '--'),
      },
    ];
    return (
      <div>
        <Card
          title={<span id="payInfor">收费信息</span>}
          extra={isDetail ? null : <a onClick={this.updateChare}>修改</a>}
        >
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="入职日期">{chargeDto.entryDate || '--'}</Description>
            <Description term="是否联系员工">{chargeDto.conEmpFlag || '--'}</Description>
            <Description term="执行地区">{chargeDto.areaName || '--'}</Description>
          </DescriptionList>
          
          <Table
            columns={payColumns}
            dataSource={
              pdChargeDtos && pdChargeDtos.length &&  pdChargeDtos.filter(item => item.ass !== 1)
            }
            size="default"
            pagination={false}
            style={{ width: '70%', marginTop: 20 }}
          />

          {/* <h4 style={{ marginTop: 30 }}>
            <FormItem {...formItemLayoutMat}>
              <a onClick={this.addMkupPay}>添加个人补缴</a>
            </FormItem>
          </h4>
          {mkupPayDets.length ? (
            <div>
              {mkupPayDets.map((item, index) => (
                <div key={item.mkupPayId || item.id} style={{ marginBottom: 6 }}>
                  <Row gutter={8}>
                    <Col span={8}>
                      <FormItem label={<span> 补缴险种</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][ass]`, {
                          rules: [{ required: true, message: '请选择补缴险种' }],
                          initialValue: item.ass || undefined,
                        })(
                          <Select
                            onChange={value => this.onAsspay(value, index)}
                            style={{ width: '100%' }}
                            disabled
                          >
                            {chargeDto.pdChargeDtos.map(items => {
                              if (items.ass) {
                                return (
                                  <Option key={items.id} value={items.ass}>
                                    {items.pdName}
                                  </Option>
                                );
                              }
                              return true;
                            })}
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 补缴开始日期</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][beginDate]`, {
                          rules: [{ required: true, message: '请选择补缴开始日期' }],
                          initialValue: item.beginDate ? moment(item.beginDate) : undefined,
                        })(
                          <MonthPicker
                            placeholder="请选择"
                            format="YYYY-MM-01"
                            style={{ width: '100%' }}
                            disabled={!!item.mkupPayId}
                            disabledDate={current =>
                              this.disabledMkupStartDate(item.endDate, current)
                            }
                          />
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 补缴结束日期</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][endDate]`, {
                          rules: [{ required: false, message: '请选择补缴结束日期' }],
                          initialValue: item.endDate
                            ? moment(item.endDate)
                                .endOf('month')
                                .format('YYYY-MM-DD')
                            : undefined,
                        })(<Input style={{ width: '100%' }} disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 补缴基数</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(
                          `mkupPayDets[${item.mkupPayId || item.id}][mkupPayBase]`,
                          {
                            rules: [
                              {
                                required: true,
                                message: '请输入正确的补缴基数',
                                pattern: /^[\+\-]?\d*?\.?\d*?$/,
                              },
                            ],
                            initialValue:
                              item.mkupPayBase || item.mkupPayBase === 0
                                ? item.mkupPayBase
                                : undefined,
                          }
                        )(<Input style={{ width: '100%' }} disabled={!!item.mkupPayId} />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 补缴政策依据</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(
                          `mkupPayDets[${item.mkupPayId || item.id}][mkupPayPlcy]`,
                          {
                            rules: [{ required: true, message: '请选择补缴政策依据' }],
                            initialValue: `${item.mkupPayPlcy}` || undefined,
                          }
                        )(
                          <Select
                            onSelect={value => this.onMkuChange(value, item.mkupPayId || item.id)}
                            style={{ width: '100%' }}
                            placeholder="请选择"
                            disabled={!!item.mkupPayId}
                          >
                            <Option key={1}>按照补缴年月政策比例补缴</Option>
                            <Option key={2}>其他比例</Option>
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 个人比例</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][perProp]`, {
                          rules: [{ required: propFlag, message: '请填写个人比例' }],
                          initialValue:
                            item.perProp || item.perProp === 0 ? item.perProp : undefined,
                        })(
                          <Input
                            disabled={item.perProp ? true : item.status}
                            style={{ width: '100%' }}
                          />
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 企业比例</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][comProp]`, {
                          rules: [{ required: propFlag, message: '请填写企业比例' }],
                          initialValue:
                            item.comProp || item.comProp === 0 ? item.comProp : undefined,
                        })(
                          <Input
                            disabled={item.perProp ? true : item.status}
                            style={{ width: '100%' }}
                          />
                        )}
                      </FormItem>
                    </Col>

                    <Col span={8}>
                      <FormItem label={<span> 每月服务费</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][serPrice]`, {
                          rules: [
                            {
                              required: false,
                              pattern: /^[\+\-]?\d*?\.?\d*?$/,
                              message: '请填写正确的每月服务费',
                            },
                          ],
                          initialValue: item.serPrice,
                        })(<Input style={{ width: '100%' }} disabled={!!item.mkupPayId} />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 代收代付费用合计</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][payAmo]`, {
                          rules: [
                            {
                              required: false,
                              message: '请填写正确的代收代付费用合计',
                            },
                          ],
                          initialValue: item.payAmo,
                        })(<Input style={{ width: '100%' }} disabled={!!item.mkupPayId} />)}
                      </FormItem>
                    </Col>
                    <Col span={8} style={{ height: 64 }}>
                      <FormItem label={<span> 补缴费用合计</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][sumAmo]`, {
                          rules: [{ required: false }],
                          initialValue: item.sumAmo || item.sumAmo === 0 ? item.sumAmo : undefined,
                        })(<Input disabled style={{ width: '80%' }} />)}
                        <a
                          onClick={() => this.onMkupPayPlcy(item.mkupPayId || item.id)}
                          style={{ marginLeft: 6 }}
                        >
                          计算
                        </a>
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 是否已收费</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][chrgFlag]`, {
                          rules: [{ required: true, message: '请选择是否已收费' }],
                          initialValue: `${item.chrgFlag}` || undefined,
                        })(
                          <Select
                            style={{ width: '100%' }}
                            placeholder="请选择"
                            disabled={!(!item.editFlag || +item.editFlag === 1)}
                          >
                            <Option key={1}>是</Option>
                            <Option key={2}>否</Option>
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label={<span> 备注</span>} {...formItemLayoutMat}>
                        {getFieldDecorator(`mkupPayDets[${item.mkupPayId || item.id}][remark]`, {
                          rules: [{ required: false }],
                          initialValue: item.remark || undefined,
                        })(<Input style={{ width: '100%' }} disabled={!!item.mkupPayId} />)}
                      </FormItem>
                    </Col>
                  </Row>
                  <Divider />
                </div>
              ))}
            </div>
          ) : null} */}
        </Card>
        <Card
          title={<span id="personMkupPay">个人补缴</span>}
          extra={!isDetail && <a onClick={this.addMkupPay}>添加个人补缴</a>}
        >
          {mkupPayDets.map(item => (
            <Card
              type="inner"
              extra={
                !isDetail && (
                  <span>
                    <a onClick={() => this.addMkupPay(item)}>修改</a>
                    <Divider type="vertical" />
                    <a onClick={() => this.delMkupPay(item)}>删除</a>
                  </span>
                )
              }
            >
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="参保类型">{item.joinTypeName || '--'}</Description>
                <Description term="服务费/每月">{item.serPrice || '--'}</Description>
                {/* <Description term="代收代付费用/每月">{item.mthAmo || '--'}</Description> */}
                <Description term="补缴月数">{item.mkupPayMth || '--'}</Description>
                <Description term="补缴费用合计">{item.sumAmo || '--'}</Description>
                <Description term="是否已收费">{item.chrgFlagName || '--'}</Description>
                <Description term="备注">{item.remark || '--'}</Description>
              </DescriptionList>
              <Table
                bordered
                dataSource={item.entryMkupPayDets}
                columns={serColumns}
                pagination={false}
                size="default"
                rowKey={record => record.mkupPayDetId}
              />
            </Card>
          ))}
          {!mkupPayDets.length && <Empty />}
        </Card>
        <Modal
          title={`${mkupPayObj.pdId ? '修改' : '添加'}补缴信息`}
          visible={mkupPayVisible}
          onOk={this.mkupPayOk}
          onCancel={this.mkupPayCancel}
          destroyOnClose
          width="700px"
          confirmLoading={addPayLoading}
        >
          <Form>
            <Row>
              <Col span={11}>
                <Form.Item label="产品" {...this.tableSearchLayout}>
                  {getFieldDecorator('pdId', {
                    initialValue: mkupPayObj.pdId,
                    rules: [{ required: mkupPayVisible, message: '请选择产品' }],
                  })(
                    <HOCSelect style={{ width: '100%' }} placeholder="请选择" onChange={this.pdChange} disabled={!!mkupPayObj.pdId}>
                      {pdDictList &&
                        pdDictList.length &&
                        pdDictList.map(item => (
                          <Option value={item.itemCode} key={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                    </HOCSelect>
                  )}
                </Form.Item>
              </Col>
              <Col span={13}>
                <Form.Item label="补缴险种" {...this.tableSearchLayout}>
                  {getFieldDecorator('submitAsss', {
                    initialValue: mkupPayObj.asss ? mkupPayObj.selectAss : [],
                    rules: [{ required: mkupPayVisible, message: '请选择补缴险种' }],
                  })(
                    <HOCSelect mode="multiple" style={{ width: '100%' }} placeholder="请选择">
                      {assDictList &&
                        assDictList.length &&
                        assDictList.map(item => (
                          <Option value={item.itemCode} key={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                    </HOCSelect>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={11}>
                <Form.Item label="补缴开始日期" {...this.tableSearchLayout}>
                  {getFieldDecorator('beginDate', {
                    initialValue: mkupPayObj.beginDate ? moment(mkupPayObj.beginDate) : undefined,
                    rules: [{ required: mkupPayVisible, message: '请选择补缴开始日期' }],
                  })(
                    <MonthPicker
                      placeholder="请选择"
                      format="YYYY-MM-01"
                      style={{ width: '100%' }}
                      onChange={this.beginDateChange}
                      // disabled={!!item.mkupPayId}
                      // disabledDate={current => this.disabledMkupStartDate(item.endDate, current)}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={13}>
                <Form.Item label="补缴结束日期" {...this.tableSearchLayout}>
                  {getFieldDecorator('endDate', {
                    rules: [{ required: mkupPayVisible, message: '请选择补缴结束日期' }],
                    // initialValue: mkupPayObj.pdId,
                    initialValue: mkupPayObj.endDate ? moment(mkupPayObj.endDate) : undefined,
                  })(
                    <MonthPicker
                      placeholder="请选择"
                      format="YYYY-MM-DD"
                      style={{ width: '100%' }}
                      onChange={this.dateChange}
                      onPanelChange={this.dateChange}
                      // disabled={!!item.mkupPayId}
                      disabledDate={current => this.disabledMkupEndDate(disBeginData, current)}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={11}>
                <Form.Item label="参保类型" {...this.tableSearchLayout}>
                  {getFieldDecorator('joinType', {
                    initialValue: mkupPayObj.joinType ? `${mkupPayObj.joinType}` : undefined,
                    rules: [{ required: mkupPayVisible, message: '请选择参保类型' }],
                  })(
                    <HOCSelect style={{ width: '100%' }} placeholder="请选择">
                      {joinTypeDictList &&
                        joinTypeDictList.length &&
                        joinTypeDictList.map(item => (
                          <Option value={item.itemCode} key={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                    </HOCSelect>
                  )}
                </Form.Item>
              </Col>
              <Col span={13}>
                <Form.Item label="每月服务费用" {...this.tableSearchLayout}>
                  {/* {getFieldDecorator('serPrice', {
                    initialValue: mkupPayObj.serPrice,
                    rules: [{ required: true, message: '请输入每月服务费用' }],
                  })(<Input style={{ width: '100%' }} placeholder="请输入" />)} */}
                  {getFieldDecorator('serPrice', {
                    rules: [
                      {
                        required: mkupPayVisible,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                    initialValue: mkupPayObj.serPrice,
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={11}>
                <Form.Item label="费用是否已收" {...this.tableSearchLayout}>
                  {getFieldDecorator('chrgFlag', {
                    initialValue: mkupPayObj.chrgFlag ? `${mkupPayObj.chrgFlag}` : undefined,
                    rules: [{ required: mkupPayVisible, message: '请选择费用是否已收' }],
                  })(
                    <HOCSelect style={{ width: '100%' }} placeholder="请选择">
                      {chrgFlagDictList &&
                        chrgFlagDictList.length &&
                        chrgFlagDictList.map(item => (
                          <Option value={item.itemCode} key={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                    </HOCSelect>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={20}>
                <Form.Item label="备注" {...this.tableSearchLayout1}>
                  {getFieldDecorator('remark', {
                    initialValue: mkupPayObj.remark,
                  })(<TextArea placeholder="请输入" maxLength={100} />)}
                </Form.Item>
              </Col>
            </Row>
            {/* <Form.Item label="选择需要的险种">
              {getFieldDecorator('mkupAss', {
                initialValue: oldAssArr,
              })(
                <Checkbox.Group style={{ width: '100%' }}>
                  <Row>
                    {chargeDto.pdChargeDtos &&
                      chargeDto.pdChargeDtos.length &&
                      chargeDto.pdChargeDtos.map(item => {
                        if (item.ass && +item.ass !== 1) {
                          return (
                            <Col span={8} key={item.ass}>
                              <Checkbox
                                value={item.ass}
                                onChange={this.onAss}
                                disabled={+item.mkupFlag === 2}
                              >
                                {item.pdName}
                              </Checkbox>
                            </Col>
                          );
                        }
                        return true;
                      })}
                  </Row>
                </Checkbox.Group>
              )}
            </Form.Item> */}
          </Form>
        </Modal>
      </div>
    );
  }
}

export default ChargeInform;
